<template>

  <div class="row justify-center container-row">
      <div class="row-padding">
        <div class="wrapper grid grid--layout grid--gap-xlarge grid-2 ">
          <div id="parent">
            <Affix
                @change="handleChange"
                @scroll="handleScroll"
                position="top"
                target="#parent"
                :zIndex="100"
                :offset="30"
            >

              <Gallery :images="goodsInfo.image"></Gallery>
            </Affix>
          </div>
          <div class="desc">

            <h2 class="product__title">{{ goodsInfo.name }}</h2>

            <p class="itemNumber">Item No: {{ goodsInfo.goods_id }}</p>
            <div class="rating">
              <q-rating
                  v-model="ratingModel"
                  size="20px"
                  color="black"
                  readonly
                  icon="star_border"
                  icon-selected="star"
              />
              <span class="star-rating__caption text-size--xsmall  palm-hide ">({{ goodsInfo.score }})</span>
            </div>


            <span class="product__subtitle text-size--regular">
<!--              <div class="intro">-->
<!--                  <p>Cup With Lid. It is convenient to use in outdoor scenes and offices. </p>-->
<!--              </div>-->

              <div class="description">
                  <p>{{ goodsInfo.goods_desc }}</p>
              </div>

              <q-chip size="xl" outline square color="deep-orange" text-color="white" icon="bookmark" class="chip">
                Set-up Charge: $ 60
              </q-chip>
              <template v-if="userstore.$state.userInfo.token">
                <q-btn v-if="collect" color="teal" @mousemove="changeStrat(true)" @mouseleave="changeStrat(false)" @click="collectedGoods(goodsInfo.goods_id)" class="favo-btn">
                  <q-icon :name="start? biStar:biStarFill"/>
                  <span class="favo" v-if="collect">Collected</span>
                </q-btn>
                <q-btn v-else color="teal" @mousemove="changeStrat(true)" @mouseleave="changeStrat(false)" @click="collectGoods(goodsInfo.goods_id)" class="favo-btn">
                  <q-icon :name="start? biStarFill:biStar"/>
                  <span class="favo" >Collect</span>
                </q-btn>
              </template>


              <q-markup-table separator="cell" flat bordered>
              <thead>
                <tr>
                  <th class="text-center text-weight-bold">QUANTITY</th>
                  <th class="text-center text-weight-bold">PRICE</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_1 }}</td>
                  <td class="text-center">${{ goodsInfo.price_1 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_2 }}</td>
                  <td class="text-center">${{ goodsInfo.price_2 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_3 }}</td>
                  <td class="text-center">${{ goodsInfo.price_3 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_4 }}</td>
                  <td class="text-center">${{ goodsInfo.price_4 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_5 }}</td>
                  <td class="text-center">${{ goodsInfo.price_5 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_6 }}</td>
                  <td class="text-center">${{ goodsInfo.price_6 }}</td>
                </tr>
                <tr>
                  <td class="text-center">{{ goodsInfo.qty_7 }}</td>
                  <td class="text-center">${{ goodsInfo.price_7 }}</td>
                </tr>
              <tr>
                  <td class="text-center">{{ goodsInfo.qty_8 }}</td>
                  <td class="text-center">${{ goodsInfo.price_8 }}</td>
                </tr>
              </tbody>
            </q-markup-table>
            <p class="q-markup-table-mark"><span class="text-subtitle1 text-weight-bolder">Price Includes: </span><span class="q-markup-table-text">1 color 1 location imprint & freight cost</span></p>


              <q-btn class="submit" label="Send an inquiry" color="deep-orange" glossy @click="prompt = true" :icon-right="fasBagShopping"/>

<!--            表单-->
              <q-dialog v-model="prompt" persistent>
                <q-card style="min-width: 650px">
                  <q-toolbar>
                    <q-toolbar-title>
                      <span class="text-weight-bold">Send an inquiry</span>
                    </q-toolbar-title>

                    <q-btn flat round dense icon="close" v-close-popup />
                  </q-toolbar>

                <q-card-section>
                   <q-form
                       @submit="onSubmit"
                       @reset="onReset"
                       class="q-gutter-md"
                   >
                     <q-input
                         color="purple-12"
                         filled
                         v-model="distributorNumber"
                         label="Distributor Number"
                         lazy-rules
                         :rules="[ val => val && val.length > 0 || 'Please type something']"
                     />
                      <q-input
                          color="purple-12"
                          filled
                          v-model="name"
                          label="Your name *"
                          lazy-rules
                          :rules="[ val => val && val.length > 0 || 'Please type something']"
                      />

                     <q-input
                         color="purple-12"
                         filled
                         v-model="email"
                         label="Your Email *"
                         lazy-rules
                         :rules="[ val => val && val.length > 0 || 'Please type something']"
                     />

                     <q-input
                         color="purple-12"
                         filled
                         v-model="remark"
                         type="textarea"
                         label="Give us your need as specific as possible*"
                         hint="Give us your need as specific as possible*"
                         lazy-rules
                         :rules="[ val => val && val.length > 0 || 'Please type something']"
                     />

                     <Upload ref="uploadRef"></Upload>

<!--                      <q-input-->
<!--                          filled-->
<!--                          type="number"-->
<!--                          v-model="age"-->
<!--                          label="Your age *"-->
<!--                          hint="Name and surname"-->
<!--                          lazy-rules-->
<!--                          :rules="[-->
<!--                          val => val !== null && val !== '' || 'Please type your age',-->
<!--                          val => val > 0 && val < 100 || 'Please type a real age'-->
<!--                        ]"-->
<!--                      />-->



<!--                    <q-toggle v-model="accept" label="I accept the license and terms" />-->

                    <q-card-actions align="right" class="text-black">
                      <q-btn label="Submit" type="submit" color="purple"/>
                      <q-btn label="Reset" type="reset" color="purple" flat class="q-ml-sm" />
                    </q-card-actions>

<!--                     <div>-->
<!--                      <q-btn label="Submit" type="submit" color="primary"/>-->
<!--                      <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />-->
<!--                    </div>-->
                  </q-form>
                </q-card-section>

                </q-card>
              </q-dialog>
            </span>

            <q-list bordered class="rounded-borders">
              <q-expansion-item
                  v-model="expanded"
                  expand-separator
                  :icon="fasCookieBite"
                  label="Product Detail"
              >
                <q-card>
                  <q-card-section>
                    <q-list>
                      <q-item>
                        <q-item-section>
                          <q-item-label>Color</q-item-label>
                          <q-item-label class="q-markup-table-text" lines="2">{{goodsInfo.color}}</q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>Material</q-item-label>
                          <q-item-label class="q-markup-table-text" lines="2">{{goodsInfo.material}}</q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>Size</q-item-label>
                          <q-item-label class="q-markup-table-text">{{goodsInfo.product_length}}" x {{goodsInfo.product_width}}" x {{goodsInfo.product_height}}"</q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>Item Weight</q-item-label>
                          <q-item-label class="q-markup-table-text">{{goodsInfo.product_weight}} lbs</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                  expand-separator
                  :icon="fasPaintRoller"
                  label="Imprint"
              >
                <q-card>
                  <q-card-section>
                    <q-list>
                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Imprint Size: </span>
                              <span class="q-markup-table-text">custom</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Imprint Method: </span>
                              <span class="q-markup-table-text">Silkscreen, Unimprinted</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Imprint Color: </span>
                              <span class="q-markup-table-text">Standard Colors</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Imprint Location: </span>
                              <span class="q-markup-table-text">custom</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Sold Unimprinted: </span>
                              <span class="q-markup-table-text">Yes</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Personalization: </span>
                              <span class="q-markup-table-text">No</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Full Color Process: </span>
                              <span class="q-markup-table-text">No</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                  expand-separator
                  :icon="fasTruckFast"
                  label="Production and Shipping"
              >
                <q-card>
                  <q-card-section>
                    <q-list>
                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Production Time: </span>
                              <span class="q-markup-table-text">7 - 9 business days</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Rush Service: </span>
                              <span class="q-markup-table-text">Yes</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced inset />

                      <q-item>
                        <q-item-section>
                          <q-item-label>
                            <p>
                              <span class="text-subtitle1 text-weight-bolder">Packaging: </span>
                              <span class="q-markup-table-text">Poly Bag, Bulk</span>
                            </p>
                          </q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-list>



          </div>
        </div>
      </div>
  </div>

  <div class="title-flex"></div>

  <aplusmax-container title="Hot Category" right-title="View all products" class="other" right-link="/pc/AllProducts">
<!--    <aplusmax-best-sellers-card :show="false" :foot="false"></aplusmax-best-sellers-card>-->
    <aplusmax-four-goods></aplusmax-four-goods>
  </aplusmax-container>

</template>


<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import {onMounted, ref, shallowRef, watch} from "vue";
import { biSearch, biPerson, biCart, biStar, biStarFill} from '@quasar/extras/bootstrap-icons'
import { useRoute } from 'vue-router'
import Affix from "./components/Affix.vue";
import Gallery from "./components/Gallery.vue";
import Upload from "./components/upload.vue";
import guessWhatYouLike from "./components/guess-what-you-like.vue"
import {biPuzzleFill} from "@quasar/extras/bootstrap-icons";
import { fasPaintRoller, fasCookieBite, fasTruckFast, fasBagShopping } from "@quasar/extras/fontawesome-v6";
import {Notify, useQuasar} from 'quasar'
import {goodsCollect, goodsCollected, goodsDesc} from "../../api/goods";
import { appStore } from '@/store/app.ts';
import { userStore } from '@/store/user.ts';
import {createOrder} from "../../api/order";
const appstore = appStore();
const userstore = userStore()
const route = useRoute()

const handleChange = (res: any) => {};

const handleScroll = (res: any) => {};
const expanded = ref(true)
const affixRef = shallowRef<InstanceType<typeof Affix> | null>(null);

// onMounted(() => {
//   console.log(affixRef.value?.update);
// });

const ratingModel = ref(null)
const prompt = ref(false)
const goodsInfo = ref({})
const collect = ref({})
const start = ref(false)
const changeStrat = (payload: boolean) => {
  start.value = payload
}

// 获取路由参数
const getGoodsDesc = () => {
  const goodsID = route.params.id
  goodsDesc(goodsID).then((res) => {
    console.log(res.data)
    goodsInfo.value = res.data.goodsDesc
    collect.value = res.data.collect
    ratingModel.value = goodsInfo.value.score
    appstore.setcurrentCategory(goodsInfo.value.category_id)
  }).catch((err) => {
    console.log(err)
  });
}
getGoodsDesc()



// 表单
const $q = useQuasar()
const distributorNumber = ref(null)
const name = ref(null)
const email = ref(null)
const remark = ref(null)
const uploadRef = ref(null)
const onSubmit = async () => {
  const formData = new FormData();

  // 添加所有文件到 FormData
  uploadRef.value.uploaderRef.files.forEach(file => {
    formData.append('files', file); // 字段名根据后端要求调整
  });
  formData.append('name', name.value)
  formData.append('email', email.value)
  formData.append('remark', remark.value)
  formData.append('goods_id', route.params.id)
  formData.append('distributor_number', distributorNumber.value)
  createOrder(formData).then((res) => {
    $q.notify({
      color: 'green',
      textColor: 'white',
      icon: 'check',
      message: '创建成功',
      position: 'top-right',
    })
    onReset()
    prompt.value = false
  })
}

const onReset = () => {
  name.value = null
  email.value = null
  remark.value = null
  distributorNumber.value = null
  uploadRef.value.cleanFile()
}

watch(() => route.params.id, (val) => {
  getGoodsDesc()
})

const collectGoods = (goods_id) => {
  goodsCollect({goods_id: goods_id}).then((res) => {
    $q.notify({
      color: 'green',
      textColor: 'white',
      icon: 'check',
      message: 'collect',
      position: 'top-right',
    })
    collect.value = true
  })
}
const collectedGoods = (goods_id) => {
  goodsCollected({goods_id: goods_id}).then((res) => {
    $q.notify({
      color: 'green',
      textColor: 'white',
      icon: 'check',
      message: 'collected',
      position: 'top-right',
    })
    collect.value = false
  })
}

</script>



<style scoped lang='less'>
.desc{
  min-width: 350px;
  h2{
    font-size: 45px;
  }
}
.q-radio{
  padding-right: 10px;
}
.row-padding{
  padding: 0 50px;
}
.grid--gap-xlarge {
  --col-gap: calc(80px * .8);
}
.grid--layout {
  --col-size: calc( (100% - calc( 80px * .8) * ( 2 - 1)) / 2 );
  grid-template-columns: repeat(2, var(--col-size));
}
.grid-2 {
  --visible-cols: 2;
}
.grid {
  --col-gap: calc( 80px * .8);
  --col-size: calc((100% - var(--col-gap)*(2 - 1)) / 2);
  display: grid;
  grid-gap: var(--col-gap);
}
.q-img{
  border-color: rgba(29, 29, 29, 0.15);
  border-width: 1px;
  border-style: solid;
}
.affix{
  margin-right: 50px;
}
.chip{
  margin-left: 0;
}
h2{
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: 800;
}
.rating{
  display: grid;
  grid-template-columns: max-content auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
}
.itemNumber{
  margin-bottom: 25px;
  font-size: 26px;
  font-weight: 600;
}
.product__subtitle{
  .intro{
    margin-bottom: 15px;
    font-size: 20px;
    color: #464646;
    font-weight: 800;
  }
  .description{
    margin-bottom: 15px;
    font-size: medium;
    color: #464646;
  }
  .text-weight-bold{
    font-weight: 800;
  }
}
.q-markup-table-mark{
  margin-bottom: 15px;
}
.q-markup-table-text{
  color: #818181;
}
.text-center{
  font-size: 14px;
}
.rounded-borders, .submit{
  margin-bottom: 15px;
}
:deep(.container--vertical-space){
  margin-top: 120px;
}
.other{
  margin-top: 150px !important;
}



.title-flex {
  margin-top: 150px;
  display: flex;
  align-items: center;
  font-size: 0.4rem;
  color: #d7d7d7;
}

.title-flex::before,
.title-flex::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d7d7d7;
}

.title-flex::before {
  margin-right: 0.25rem;
}

.title-flex::after {
  margin-left: 0.25rem;
}
.favo-btn{
  padding: 15px;
}
.favo{
  margin-left: 8px;
  font-size: 15px;
}
</style>